import { settings, changeSetting } from "../settings";
import { slideTouching, slideMoving } from "../signals";
import { Pencil } from "lucide-preact";
import { batch } from "@preact/signals";

const SettingRange = ({ area, prop, desp, min, max, step, look }) => (
  <>
    <label class="label mb-[0] text-xs" for={area + prop}>
      {desp} ({settings.value[area][prop]})
      <button
        type="button"
        title="修改数值"
        name="editValue"
        class="btn btn-xs btn-ghost btn-square"
        onClick={() => {
          const value = Number.parseFloat(
            prompt(`${desp} (${min} ~ ${max})`, settings.value[area][prop]),
          );
          if (!Number.isNaN(value) && value >= min && value <= max) {
            changeSetting(area, prop, value);
          }
        }}
      >
        <Pencil class="size-4" />
      </button>
    </label>
    <input
      type="range"
      id={area + prop}
      min={min}
      max={max}
      step={step}
      onChange={(event) => {
        changeSetting(area, prop, Number.parseFloat(event.target.value));
      }}
      onInput={() => {
        slideTouching.value = !!look;
      }}
      onTouchMove={() => {
        slideMoving.value = !!look;
      }}
      onTouchEnd={() => {
        batch(() => {
          slideMoving.value = !!0;
          slideTouching.value = !!0;
        });
      }}
      value={settings.value[area][prop]}
      class="range range-sm"
    />
  </>
);

export default SettingRange;
